import React, { useState } from 'react'
import { MessageFilled } from "@ant-design/icons"
import { withRouter } from "react-router-dom"
import { DeleteOutlined, EditOutlined } from "@ant-design/icons"
import { deleteAsk, selectAsk, edmiteAsk } from "../../api/ask"
import { Modal, message } from "antd"
import "./AskListItem.scss"
function AskListItem(props) {
    const [flag, setFlag] = useState(false)
    const [deteleFlag, setDeteleFlag] = useState(false);
    const [edmitFlag, setEdmitFlag] = useState(false);
    const [context, setContext] = useState("")
    const showDetale = () => {
        setDeteleFlag(true);
    };


    const deleteCancel = () => {
        setDeteleFlag(false);
    };
    const deleteAsking = async () => {
        let res = await deleteAsk({ answerId: props.obj.answerId })
        if (res.data.code === 200) {
            if (res.data.msg === "0") {
                message.warn("此问题不能删除")
            } else {
                message.success("删除成功")
                props.init()
            }

        }
        setDeteleFlag(false);
    }
    const showEdmit = async () => {
        let res = await selectAsk({ answerId: props.obj.answerId })
        setContext(res.data.data.context);
        setEdmitFlag(true);
    };
    const edmitAsking = async () => {
        let res = await edmiteAsk({
            answerId: props.obj.answerId,
            questionValue: context
        })
        if(res.data.msg==="1"){
            message.success("编辑成功")
            props.init()
        }else{
            message.warn("此问题不能编辑")
        }
        setEdmitFlag(false);
    }
    const edmitCancel = () => {
        setEdmitFlag(false);
    };
    return (
        <div className="askItem">
            <div className="askItem_left">
                <div className="askItem_left_top">
                    <p>
                        <span >{props.obj.qUserName}</span>
                        <span>{props.obj.replyTime}</span>
                        <span>实训类型：<span style={{ color: "#679cf6" }}>{
                            props.obj.typeNum === "0" ? "实训" :
                                props.obj.typeNum === "1" ? "面试" :
                                    props.obj.typeNum === "2" ? "工作" :
                                        props.obj.typeNum === "3" ? "其他" :
                                            props.obj.typeNum === "4" ? "答辩" :
                                                "未知"
                        }</span></span>
                    </p>
                    <p><MessageFilled />{props.obj.answerCount}</p>
                </div>
                <div className="askItem_left_bottom">
                    <div>
                        <span onClick={() => {
                            props.history.push("/home/askdetail/" + props.obj.answerId)
                        }}>
                            {
                                props.obj.quality ? <img src="/static/img/boutique.fc46be52.svg" /> : null
                            }
                            {
                                props.obj.authentication ? <img src="/static/img/authentication.c814dd7c.svg" /> : null
                            }
                            {props.obj.questionTitle}
                        </span>
                        <span className={flag ? "active" : ""}>{props.obj.questionContent}</span>
                        <p>{props.obj.labels && props.obj.labels.map((item, index) => {
                            return <span key={index}>{item}</span>
                        })}</p>
                    </div>
                    <p onClick={() => {
                        setFlag(!flag)
                    }}>查看全部</p>
                </div>
            </div>
            {
                props.ask ? <div className="askManer"><EditOutlined onClick={() => {
                    showEdmit()
                }} /><DeleteOutlined onClick={() => {
                    showDetale()
                }} /></div> : <button onClick={() => {
                    props.history.push("/home/askdetail/" + props.obj.answerId)
                }}>回答</button>
            }
            <Modal title="删除" visible={deteleFlag} okText="确认删除" cancelText="取消" onOk={deleteAsking} onCancel={deleteCancel}>
                <p>你确定要删除吗</p>
            </Modal>
            <Modal title="编辑" visible={edmitFlag} okText="确认编辑" cancelText="取消" onOk={edmitAsking} onCancel={edmitCancel}>
                <p>请编辑你的问题</p>
                <textarea value={context} onChange={(e) => {
                    setContext(e.target.value)
                }} />
            </Modal>
        </div>
    )
}
export default withRouter(AskListItem)